<template>
  <div class="manage-layoutManage">
    <div class="content">
      <div class="head">
        <slot name="head">
          <!-- 查询功能-->
        </slot>
      </div>
      <div class="middle">
        <slot name="middle">
          <!--表单-->
        </slot>
      </div>
      <div class="foot">
        <slot name="foot"></slot>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.home-portletManage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 57px);
  overflow: auto;
  user-select: none;

  .suofangblock {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 10px;
    overflow: hidden;
    border: 1px solid black;
  }

  .selected {
    border: 3px solid blue;
  }
}

.iAmComponent {
  height: calc(100% - 15px);
}

.manage-layoutManage {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f5f8f9;

  .content {
    height: calc(100% - 0px);
    padding: 15px;
    background-color: white;

    .head {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 32px;

      .search-item {
        margin-right: 15px;
      }
    }

    .middle {
      height: calc(100% - 88px);
      margin: 15px 0;
    }

    .foot {
      display: flex;
      justify-content: right;
    }
  }
}
</style>
